<template>
    <div class="main">
        <div :style="
        'background:url(' + path + ') no-repeat center; position: relative;'
      " class="cover">
            <div class="player" style="" @click="play()">
                <eagle-image v-if="form.Ext == 'mp4'" class="player_icon" width="50px" height="50px" fit="contain" :src="require('@/assets/Images/AppIcon/icon_playon.png')" />
                <eagle-image v-else class="player_icon" width="50px" height="50px" fit="contain" :src="require('@/assets/Images/AppIcon/icon_readon.png')" />
            </div>
        </div>
        <div style="position: relative">
            <eagle-card :title="form.ResName">
                <template #desc>
                    <eagle-row style="margin-top: 20px">
                        <eagle-col span="6">分享人: {{ form.CreateChnName }}</eagle-col>
                        <div>
                            <eagle-col span="4">学习进度:</eagle-col>
                            <eagle-col span="12">
                                <eagle-progress style="top: 3px" stroke-width="8" :show-pivot="false" :percentage="form.CurrentProgress" />
                            </eagle-col>
                        </div>
                    </eagle-row>
                    <!-- <span>分享人：{{ form.CreateChnName }}</span>
      <span>学习进度： <van-progress :show-pivot="false" :percentage="form.CurrentProgress" /></span> -->
                </template>
            </eagle-card>
            <eagle-tag class="tags" type="primary">{{
        form.Ext.toUpperCase()
      }}</eagle-tag>
        </div>

        <div class="progress">
            <div class="coursedetail" style="margin-top: 5px">
                <eagle-cell>
                    <eagle-card :thumb="require('@/assets/Images/AppIcon/' + form.Ext + '.png')">
                        <template #desc>
                            <div class="text-ellipsis">
                                描述：{{ form.Introduce || "暂无描述" }}
                            </div>
                        </template>
                    </eagle-card>
                </eagle-cell>
            </div>
            <div class="viewcount">
                <eagle-image style="vertical-align: middle" width="15" height="11" :src="require('@/assets/Images/AppIcon/icon_ask_view.png')" />
                浏览({{ form.ViewCnt }})
                <span @click="collect(!form.IsCollected)">
                    <eagle-image style="vertical-align: middle; margin-left: 5px" width="13" height="12" :src="
              form.IsCollected
                ? require('@/assets/Images/AppIcon/icon_heart_on.png')
                : require('@/assets/Images/AppIcon/icon_heart_off.png')
            " />
                    收藏({{ form.CollectCnt }})
                </span>
            </div>
            <div v-if="form.ExamName" style="padding: 10px">
                <div class="curriculum-title mt-10">课件习题</div>
                <div class="curriculum-list mt-10" @click="_goDetail()">
                    <div class="curriculum-list-cell">
                        <div class="curriculum-list-l">
                            <img class="imgs" src="@/assets/Images/AppIcon/icon_exam_icon_2.png" alt="" />
                            <div class="ml-10">
                                <div class="curriculum-list-title mb-10">
                                    {{ form.ExamName || "" }}
                                </div>
                                <!-- <div class="curriculum-list-cont">暂无描述</div> -->
                            </div>
                        </div>
                        <span style="font-size: 12px; color: rgb(5, 125, 229)">进入习题</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    components: {},
    data() {
        return {
            id: this.$route.query.id,
            sid: this.$route.query.sid,
            stype: this.$route.query.stype,
            form: {
                CurrentProgress: 0,
                Ext: "common_defaultpicture",
            },
            baseUrl: process.env.VUE_APP_BASE_API,
            path: "",
            already: 0,
            border: false,
            fileList: [],
            total: 0,
        };
    },
    computed: {
        ...mapGetters(["roles"]),
    },
    created() {
        this.getDetail();
    },
    methods: {
        getDetail() {

            var sid = this.sid;
            if (sid == undefined) {
                sid = 0;
            }
            var stype = this.stype;
            if (stype == undefined) {
                stype = "C";
            }

            let params = { id: this.id, sid: sid, stype: stype };
            this.$axios.get("/TrainRes/GetDetail", { params: params })
                .then((res) => {
                    if (res.data.Cover.indexOf("http") == -1) {
                        this.path = this.baseUrl + res.data.Cover;
                    } else {
                        this.path = res.data.Cover;
                    }
                    this.form = res.data;
                    this.already = 0;
                });

        },

        collect(param) {
            let params = { id: this.form.ID, on: param };
            if (!param) {
                this.$axios
                    .get("/TrainRes/CancelCollect", { params: params })
                    .then((res) => {
                        console.log(res, "res");
                        //this.$toast("");

                        this.form.IsCollected = !this.form.IsCollected;
                        if (this.form.CollectCnt > 0) {
                            this.form.CollectCnt--;
                        }
                    })
                    .catch((err) => {
                        console.log("err", err);
                    });
            } else {
                this.$axios
                    .get("/TrainRes/Collect", { params: params })
                    .then((res) => {
                        console.log(res, "res");
                        //this.$toast("");

                        this.form.IsCollected = !this.form.IsCollected;
                        this.form.CollectCnt++;
                    })
                    .catch((err) => {
                        console.log("err", err);
                    });
            }
        },
        // 详情
        _goDetail() {
            this.$router.push("/Train/ExExamExplain?id=" + this.form.ExamID);
        },
        play() {

            if (this.form.Ext == "mp4" || this.form.Ext == "avi") {
                var url = "/Train/Detail?id=" + this.form.ID + "&sid=" + this.form.SID + "&stype=" + this.form.SType;
                this.$router.push(url);
            } else {
                var url = "/Train/DocDetail?id=" + this.form.ID + "&sid=" + this.form.SID + "&stype=" + this.form.SType;
                this.$router.push(url);
            }
            // console.log(this.form ,'this.form ');
            // const url = this.baseUrl+this.form.AttMiddlePath
            // window.open(url)
        },
    },
};
</script>

<style lang="less" scoped>
/*
        .main {
            height: 100vh;
        }
    */
.cover {
    width: 100%;
    height: 200px;
    background-size: 100% 200px !important;
}
.player {
    width: 100%;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    color: #ffffff;
}
.player_icon {
    position: absolute;
    bottom: 50%;
    left: 45%;
}
.van-card__thumb {
    width: 60px;
    height: 60px;
}
.van-card__content {
    min-height: 65px;
}

.van-card__title {
    font-size: 16px;
}

.progress {
    background-color: #fff;
    font-size: 12px;
    .viewcount {
        padding: 8px;
    }
}

.det_top_box {
    padding: 10px;
    background-color: #e8f1f8;
}

.detail_header {
    color: #ffffff;
    background: url("../../../assets/Images/AppIcon/image_riskunit_detail_bg.png");
    background-size: cover;
    padding: 10px;
    border-radius: 5px;
    /*background-color: #fff;*/

    .det_top {
        display: flex;
        justify-content: space-between;

        .dep_top_img {
            height: 20px;
            width: 20px;
            margin-right: 5px;
        }
    }

    .det_name {
        margin-top: 20px;
        text-align: center;
    }

    .det_location {
        text-align: center;
        margin-bottom: 20px;
    }
}
.det_tab {
    padding: 10px;
    .det_tab_item {
        padding: 10px 0;
        background-color: #fff;
        border-radius: 5px;
        margin-bottom: 10px;

        .det_tab_item_text {
            padding: 0 10px;
        }
    }
}

.text_box {
    padding: 10px;
    border-radius: 5px;
    /*background-color: #e8f1f8;*/
    margin-bottom: 10px;

    .text_top {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        .top_link {
            color: #1989fa;
        }
    }

    .text_item {
        display: flex;
        justify-content: space-between;
        margin-left: 10px;

        .item_link {
            color: #1989fa;
        }
    }

    .text_img {
        display: flex;
        align-items: center;

        .img_item {
            width: 33.3%;
            text-align: center;

            img {
                height: 25px;
                width: 25px;
                margin-bottom: 10px;
            }
        }
    }

    .text_history {
        display: flex;
        vertical-align: middle;
        margin-bottom: 10px;
    }

    .text_member {
        color: #1989fa;
        margin-bottom: 10px;
    }

    .text_total_img {
        display: flex;
        align-items: center;

        .img_item {
            width: 33.3%;
            text-align: center;

            .img_item_top {
                display: flex;
                vertical-align: middle;
                margin-bottom: 10px;
            }
            img {
                height: 15px;
                width: 15px;
                margin-right: 5px;
            }
        }
    }
    .text_record_list {
        .list_row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            > div {
                width: 33.3%;
            }
            .row_center {
                text-align: center;
            }
            .row_right {
                text-align: right;
            }
        }
    }
}
.operate_det {
    background-color: #fff;
    padding: 10px;
    .operate_list {
        border: 1px solid #e8f1f8;
        .operate_row_first {
            padding: 10px;
            background-color: #e8f1f8;
            border-bottom: 1px solid #e8f1f8;
            margin-bottom: 10px;
        }
        .operate_row {
            padding: 10px;
            border-bottom: 1px solid #e8f1f8;
            /*margin-bottom: 10px;*/
        }
    }
}

.bottom-btns {
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    .title {
        width: 100%;
        height: 30px;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.tags {
    position: absolute;
    right: 0px;
    top: 10px;
    border-radius: 26.64rem 0 0 26.64rem;
}
.curriculum-title {
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
}
.curriculum-list-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    .curriculum-list-l {
        display: flex;
        align-items: center;
    }
}
.curriculum-list-cell:last-child {
    border-bottom: 1px solid #fff;
}
.imgs {
    width: 40px;
    height: 40px;
}
.curriculum-list-title {
    font-size: 15px;
}
.curriculum-list-cont {
    font-size: 12px;
    color: #666;
    > span {
        margin: 0 10px;
    }
}

/deep/ .coursedetail .van-card__thumb {
    width: 60px !important;
    height: 60px !important;
}
</style>
